<template>
  <!-- 数据展示 -->
  <div class="Task-week">
    <!-- 顶部标题栏组件 -->
    <top-header :leftArrow="leftArrow"></top-header>
    <!-- 中心内容 -->
    <div class="content">
      <van-list v-model="loading" :finished="finished" finished-text="没有更多了" @load="onLoad">
        <van-cell v-for="(item,index) in List" :key="index" center @click="toDetail(item)">
          <template #title>
            <!-- <van-tag style="margin-right:10px" type="primary" color="burlywood">{{ index + 1 }}</van-tag> -->
            <van-tag size="large" color="#ffe1e1" text-color="#ad0000">{{item.day}}</van-tag>
            <span style="margin-left:10px">{{item.cust}}</span>
          </template>
          <template #label>
            <div style="color:burlywood;font-size:0.4rem">{{item.tasksAddress}}</div>
            <div>{{item.tasksState}}</div>
          </template>
          <template #default>
            <div>登记人: {{item.createBy}}</div>
            <div>派单人:{{item.deliverMan}}</div>
            <div>服务人:{{item.staffName}}</div>
          </template>
        </van-cell>
      </van-list>
    </div>
  </div>
</template>

<script>
import { TopHeader } from '@/components'
import { GetWeekDefaultSer } from '@/request/api'
export default {
  name: 'TaskWeek',
  components: {
    TopHeader
  },
  data () {
    return {
      leftArrow: true, // 顶部标题栏组件是否有返回按钮
      List: [],
      loading: false,
      finished: false,
      pageIndex: 0,
      serCount: 0 // 数据总量
    }
  },
  methods: {
    onLoad () {
      // 异步更新数据
      setTimeout(() => {
        this.pageIndex++
        GetWeekDefaultSer().then(res => {
          console.log(res.result.week)
          this.List = [...this.List, ...res.result.week]
        })
        // 加载状态结束
        this.loading = false
        // 数据全部加载完成
        if (10 * (this.pageIndex + 1) >= this.serCount) {
          this.finished = true
        }
      }, 1000)
    },
    // 页面跳转到详情
    toDetail (value) {
      console.log('跳转到详情页', value)
      sessionStorage.setItem('TASK_TO_DATA', JSON.stringify(value))
      this.$router.push({ path: '/TaskToDetail' })
    }
  }
}
</script>

<style lang="less" scoped>
.Task-week {
  .content {
    // box-shadow: 0 3px 4px 2px rgb(240, 240, 240);
  }
}
</style>
